<template>
  <!--个性化设置-->
  <el-row style="height:100%">
    <page>
      <pageheader :event="'menuPopUp'" :isShow="false">
        个性化设置
      </pageheader>
      <div class="page-content">
        <el-card class="box-card">
          <el-row class="clear">
            <div class="UpFileItem">
              <p>PCLogo：</p>
              <el-upload
                action=""
                :class="dataVal.logo?'UpFileHidden':''"
                list-type="picture-card"
                :file-list="logoList"
                :on-preview="(file)=>imgPreview(file,'logo')"
                :on-change="(file)=>getFile(file,'logo')"
                :on-remove="(file)=>imgRemove(file,'logo')"
                :auto-upload="false"
                :show-file-list="true"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="UpFileItem">
              <p>PC登陆背景图：</p>
              <el-upload
                action=""
                :class="dataVal.loginbg?'UpFileHidden':''"
                list-type="picture-card"
                :file-list="loginbgList"
                :on-preview="(file)=>imgPreview(file,'loginbg')"
                :on-change="(file)=>getFile(file,'loginbg')"
                :on-remove="(file)=>imgRemove(file,'loginbg')"
                :auto-upload="false"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="UpFileItem">
              <p>PCTitle图标：</p>
              <el-upload
                action=""
                :class="dataVal.titleLink?'UpFileHidden':''"
                list-type="picture-card"
                :file-list="titleLinkList"
                :on-preview="(file)=>imgPreview(file,'titleLink')"
                :on-change="(file)=>getFile(file,'titleLink')"
                :on-remove="(file)=>imgRemove(file,'titleLink')"
                :auto-upload="false"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="UpFileItem">
              <p>手机端Logo：</p>
              <el-upload
                action=""
                :class="dataVal.mlogo?'UpFileHidden':''"
                list-type="picture-card"
                :file-list="mlogoList"
                :on-preview="(file)=>imgPreview(file,'mlogo')"
                :on-change="(file)=>getFile(file,'mlogo')"
                :on-remove="(file)=>imgRemove(file,'mlogo')"
                :auto-upload="false"
                :show-file-list="true"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="UpFileItem">
              <p>手机端登陆背景图：</p>
              <el-upload
                action=""
                :class="dataVal.mloginbg?'UpFileHidden':''"
                list-type="picture-card"
                :file-list="mloginbgList"
                :on-preview="(file)=>imgPreview(file,'mloginbg')"
                :on-change="(file)=>getFile(file,'mloginbg')"
                :on-remove="(file)=>imgRemove(file,'mloginbg')"
                :auto-upload="false"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <el-dialog v-dialogDrag :visible.sync="dialogVisible" :title="diaTitle">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-row>
          <p style="font-size:14px;color:#666;padding:0 0 10px">只能上传jpg/png/jpeg文件，图片大小不能超过1.5M</p>
          <el-row>
            <p>PC登陆框位置：<span class="sp">&nbsp;&nbsp;格式为("left:30px;top:30px")&nbsp;&nbsp;("left:50%;top:50%")&nbsp;&nbsp;("left:30%;")&nbsp;注：为空则居中显示</span>
            </p>
            <el-input style="width:497px;" v-model="loginSite" placeholder="请指定left和top"></el-input>
          </el-row>
          <el-row>
            <p>PC登录页logo：
              <el-switch
                v-model="loginLogoShow"
                :disabled="dataVal.logo?false:true"
                active-text="开"
                inactive-text="关">
              </el-switch>
              <span class="sp">注：上传Logo才能控制是否在登录页显示</span></p>
          </el-row>
          <el-row style="margin-top:20px;">        <!--:disabled="(!dataVal.logo&&!dataVal.loginbg)"-->
            <el-button type="primary" style="width:148px;" @click="uploading">保 存<i
              class="el-icon-upload el-icon--right"></i></el-button>
            <el-button type="warning" style="width:148px;" @click="restore">还 原<i
              class="el-icon-refresh-left el-icon--right"></i></el-button>
          </el-row>
        </el-card>
      </div>
      <el-card style="margin-top: 20px">
        <el-button type="primary" size="small" @click="setWeb">前端刷新</el-button>
      </el-card>
    </page>
  </el-row>
</template>

<script>
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";

  export default {
    data() {
      return {
        dialogImageUrl: '',
        dataVal: {
          logo: '',
          loginbg: '',
          titleLink: '',
          mlogo: '',         //手机端logo
          mloginbg: '',      //手机端Loginbg
        },
        loginSite: '',
        dialogVisible: false,
        diaTitle: 'Logo',            //模态框标题
        loginLogoShow: true,
        logoList: [],
        loginbgList: [],
        titleLinkList: [],
        mlogoList: [       //手机端

        ],
        mloginbgList: []
      }
    },
    components: {
      page,
      pageheader
    },
    created() {
      this.getConfig();

    },
    methods: {
      //获取配置  （图片、文字等）
      getConfig() {
        let url = 'sys/personalise/get';
        this.$api.get(url)
        .then(data => {
          if (data == '10001') {
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading', false);
            return
          }
          for (let item in data.data.data_value) {
            switch (item) {
              case 'logo': {
                let mode = {};
                mode.name = '0';
                mode.url = data.data.data_value.logo;
                this.dataVal.logo = data.data.data_value.logo;
                if (mode.url)
                  this.logoList.push(mode);
                break;
              }
              case 'loginbg': {
                let mode = {};
                mode.name = '0';
                mode.url = data.data.data_value.loginbg;
                this.dataVal.loginbg = data.data.data_value.loginbg;
                if (mode.url)
                  this.loginbgList.push(mode);
                break;
              }
              case 'titleLink': {
                let mode = {};
                mode.name = '0';
                mode.url = data.data.data_value.titleLink;
                this.dataVal.titleLink = data.data.data_value.titleLink;
                if (mode.url)
                  this.titleLinkList.push(mode);
                break;
              }
              case 'mlogo': {
                let mode = {};
                mode.name = '0';
                mode.url = data.data.data_value.mlogo;
                this.dataVal.mlogo = data.data.data_value.mlogo;
                if (mode.url)
                  this.mlogoList.push(mode);
                break;
              }
              case 'mloginbg': {
                let mode = {};
                mode.name = '0';
                mode.url = data.data.data_value.mloginbg;
                this.dataVal.mloginbg = data.data.data_value.mloginbg;
                if (mode.url)
                  this.mloginbgList.push(mode);
                break;
              }
              case 'loginSite': {
                this.loginSite = data.data.data_value.loginSite;
                break;
              }
              case 'loginLogoShow': {
                this.loginLogoShow = data.data.data_value.loginLogoShow;
                break;
              }
            }
          }
          this.$Bus.$emit('Loading', false)

        })
        .catch(err => {
          this.$Bus.$emit('Loading', false)
           console.log(err);
        })
      },
      //添加图片时
      getFile(file, type) {
        const isImg = file.raw.type == 'image/jpeg' || file.raw.type == 'image/jpg' || file.raw.type == 'image/png';
        const isLt5M = file.raw.size / 1024 / 1024 < 1.5;
        if (!isImg || !isLt5M) {
          switch (type) {
            case "logo": {
              this.dataVal.logo = '';
              this.logoList = [];
              break;
            }
            case "loginbg": {
              this.dataVal.loginbg = '';
              this.loginbgList = [];
              break;
            }
            case "titleLink": {
              this.dataVal.titleLink = '';
              this.titleLinkList = [];
              break;
            }
            case "mlogo": {
              this.dataVal.mlogo = '';
              this.mlogoList = [];
              break;
            }
            case "mloginbg": {
              this.dataVal.mloginbg = '';
              this.mloginbgList = [];
              break;
            }
          }
          if (!isImg) {
            this.$message.error('只能上传图片格式(jpeg,jpg,png)!');
          } else if (!isLt5M) {
            this.$message.error('图片大小不能超过1.5M');
          }
          return;
        }
        this.getBase64(file.raw).then(res => {
          if (res) {
            switch (type) {
              case "logo": {
                this.loginLogoShow = true;
                this.dataVal.logo = res;
                break;
              }
              case "loginbg": {
                this.dataVal.loginbg = res;
                break;
              }
              case "titleLink": {
                this.dataVal.titleLink = res;
                break;
              }
              case "mlogo": {
                this.dataVal.mlogo = res;
                break;
              }
              case "mloginbg": {
                this.dataVal.mloginbg = res;
                break;
              }
            }

          } else {
            this.$message('error', "图片转base64失败，请重试");
          }
        })
      },
      //删除图片
      imgRemove(file, type) {
        switch (type) {
          case "logo": {
            this.loginLogoShow = false;
            this.dataVal.logo = '';
            break;
          }
          case "loginbg": {
            this.dataVal.loginbg = '';
            break;
          }
          case "titleLink": {
            this.dataVal.titleLink = '';
            break;
          }
          case "mlogo": {
            this.dataVal.mlogo = '';
            break;
          }
          case "mloginbg": {
            this.dataVal.mloginbg = '';
            break;
          }
        }
      },
      //查看图片
      imgPreview(file, type) {
        switch (type) {
          case "logo": {
            this.diaTitle = 'PCLogo';
            break;
          }
          case "loginbg": {

            this.diaTitle = 'PC登陆页背景图';
            break;
          }
          case "titleLink": {
            this.diaTitle = 'PCTitle图标';
            break;
          }
          case "mlogo": {

            this.diaTitle = '手机端Logo';
            break;
          }
          case "mloginbg": {

            this.diaTitle = '手机端登陆页背景图';
            break;
          }
        }
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //图片转base64
      getBase64(file) {
        return new Promise(function (resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function () {
            imgResult = reader.result;
          };
          reader.onerror = function (error) {
            reject(error);
          };
          reader.onloadend = function () {
            resolve(imgResult);
          };
        });
      },
      //上传
      uploading() {
        this.$Bus.$emit('Loading', true);
        let url = 'sys/personalise/save';
        let dataV = {
          data_value: {}
        };
        dataV.data_value.logo = this.dataVal.logo;
        dataV.data_value.loginbg = this.dataVal.loginbg;
        dataV.data_value.titleLink = this.dataVal.titleLink;
        dataV.data_value.mlogo = this.dataVal.mlogo;
        dataV.data_value.mloginbg = this.dataVal.mloginbg;
        dataV.data_value.loginSite = this.loginSite;
        dataV.data_value.loginLogoShow = this.loginLogoShow;
        this.$api.post(url, dataV).then(data => {
          if (data == '10001') {
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading', false);
            return
          }
          if (data.msg == 'success')
            this.$message.success("上传成功，重新登陆后生效");
          else {
            this.$message.error("上传失败,请重试");
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err => {
          this.$message.error("上传失败，请重试");
          this.$Bus.$emit('Loading', false);
        })
      },
      //还原
      restore() {
        this.logoList = [];
        this.loginbgList = [];
        this.titleLinkList = [];
        this.mlogoList = [];
        this.mloginbgList = [];
        this.$Bus.$emit('Loading', true);
        this.getConfig();
      },
      setWeb() {
        this.$Bus.$emit('Loading', true);
        let url = '/sys/personalise/set-web-vesrion'
        this.$api.post(url)
        .then(data => {
          if (data) {
            this.$message.success('刷新成功')
          } else {
            this.$message.error("刷新失败，请重试");
          }
          this.$Bus.$emit('Loading', false);
        })
      }
    },
    watch: {}
  }
</script>

<style lang="scss">
  .page-content {
    .fr {
      float: right;
    }

    .el-table {
      margin-bottom: 10px;
    }

    .paging {
      margin: 15px;
      height: 28px;
    }

    .UpFileHidden {
      .el-upload--picture-card {
        display: none;
      }
    }

    .box-card {
      p {
        padding: 10px 0;

        .sp {
          margin-left: 10px;
          font-size: 12px;
          color: #666;
        }
      }
    }

    .UpFileItem {
      float: left;
      margin-right: 20px;
    }
  }
</style>